<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../../static/img/index/bitbug_favicon.ico}"/>
    <link rel="stylesheet" th:href="@{../../static/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/index/serch.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/pro_reg.css}"/>
    <script th:src="@{../../static/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/proreg.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/template-web.js}"></script>
    <script !src="">
        $(function () {

            //获取二级分类，属性信息
            $('select[name=category]').change(function () {
                $.ajax({
                    url: '/go/switch',
                    type: 'get',
                    data: {
                        cateid: $(this).val()
                    },
                    success: function (data) {
                        var json = {
                            'categoryList': data.categoryList,
                            'propertyList': data.propertyList
                        };
                        var html = template('model', json);
                        $('select[name=cateid]').html(html);
                        var html2 = template('model2', json);
                        $('#property').html(html2);

                    }
                })
            })
            //图片上传
            $('#imgfile').change(function () {
                var senddata = new FormData();
                var img_file = document.getElementById("imgfile");
                var fileObj = img_file.files[0];
                senddata.append("file", fileObj);
                $.ajax({
                    type: 'post',
                    url: "/picture/upload",
                    async: true,
                    dataType: 'json',
                    data: senddata,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.status == 1) {
                            console.log(res.src);
                            $('#procover').attr('src', res.src);
                            $('#cover').val(res.src);
                        } else if (res.status == 2) {
                            alert('图片格式不正确');
                        } else if (res.status == 3) {
                            alert('图片过大');
                        }
                    }
                });
            })
        })
    </script>
</head>
<body>
<!--首页头部-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" style="font-size: 30px; font-family:'楷体';">宠物商城</a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a href="#" th:text="'欢迎您 :'+${session.login_user.getUsername()}"></a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a th:href="@{'/user/set/'+${session.login_user.getId()}}">个人中心</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="panel panel-warning promanage">
        <div class="panel-heading">
            <h4>商品管理</h4>
        </div>
        <div class="panel-body">
            <!--商品注册表单-->
            <!--主要信息部分-->
            <form id="proreg_from" th:action="@{/product/reg}" method="post" enctype="multipart/form-data">
                <h5 class="alert alert-danger">基本信息</h5>
                <input type="hidden" name="storeid" th:value="${storeId}">
                <div class="col-lg-6">
                    <!--商品名称-->
                    <input type="text" class="form-control" name="proname" placeholder="商品名称"/><br/>
                    <!--促销价-->
                    <input type="text" class="form-control" name="info" placeholder="一句话简介"/> <br/>
                </div>
                <!--产品封面图片-->
                <div class="col-lg-6">
                    <div class="thumbnail">
                        <img src="../../static/img/index/product/4.jpg" alt="产品图片" id="procover"/>
                    </div>
                    <input type="file" name="file1" id="imgfile"/>
                    <input type="hidden" name="cover" id="cover">
                </div>
                <div class="col-lg-12">
                    <hr class="divider"/>
                </div>
                <div class="col-lg-12">
                    <h5 class="alert alert-danger">属性信息</h5>
                </div>
                <!--产品属性部分（detail.html能看见的部分）-->
                <div class="col-lg-6">
                    <select name="category" class="form-control">
                        <option th:each="cate:${session.catelist}" th:value="${cate.getId()}"
                                th:text="${cate.getCategoryname()}">
                        </option>
                    </select>
                    <br/>
                    <select name="cateid" class="form-control">

                    </select>
                    <br/>
                </div>
                <div class="col-lg-12"></div>
                <!--规格信息-->
                <div class="guige">
                    <div class="col-lg-4">
                        <!--颜色-->
                        <input type="text" class="form-control" name="color" placeholder="颜色"/>
                    </div>
                    <div class="col-lg-4">
                        <!--规格-->
                        <input type="text" class="form-control" name="standard" placeholder="宠物年龄"/>
                    </div>
                    <div class="col-lg-4">
                        <!--库存-->
                        <input type="text" class="form-control" name="stock" placeholder="库存：只/条"/>
                    </div>
                    <div class="col-lg-4">
                        <!--商品原价-->
                        <input type="text" class="form-control" name="oldprice" placeholder="原价：元"/><br/>
                    </div>
                    <div class="col-lg-4">
                        <!--促销价-->
                        <input type="text" class="form-control" name="newprice" placeholder="促销价：元"/> <br/>
                    </div>
                    <div class="col-lg-4">
                        <!--备注-->
                        <input type="text" class="form-control" name="note" placeholder="特殊说明"/> <br/>
                    </div>
                </div>
                <div class="col-lg-12">
                    <hr class="divider"/>
                </div>
                <div class="col-lg-12 text-center">
                    <a href="javascript:;" class="btn btn-success xinzeng">新增</a>
                </div>
                <div class="col-lg-12">
                    <hr class="divider"/>
                </div>
                <div class="col-lg-12">
                    <h5 class="alert alert-danger">参数信息</h5>
                </div>
                <!--参数信息-->
                <div id="property">

                </div>
                <div class="col-lg-12">
                    <hr class="divider"/>
                </div>
                <div class="col-lg-12 text-center">
                    <button type="submit" class="btn btn-success">确认登记</button>
                    <button class="btn btn-info" type="reset">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/html" id="model">
    {{ each categoryList as value i}}
    <option value="{{value.id}}">{{value.categoryname}}</option>
    {{/each}}
</script>
<script type="text/html" id="model2">
    {{ each propertyList as value i}}
    <input type="text" class="form-control col-lg-3" placeholder="{{value.proname}}" name="{{value.id}}"/>
    {{/each}}
</script>
</body>
</html>
